import React from 'react'
import { Text } from '@tarojs/components'
import { findAll } from 'highlight-words-core'

export function getHighlightHtml(textToHighlight, searchWords) {
  const chunks = findAll({
    textToHighlight, searchWords, autoEscape: true,
  });
  return chunks.map((chunk, index) => {
    const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start);
    return (!chunk.highlight)
      ? text
      : (
        <Text
          key={index}
          className="theme"
        >
          {text}
        </Text>
      );
  })
}
